import React from 'react';
// import './index.css'
import { AppstoreFilled, FileOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import { Outlet } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router';
import { useEffect, useState } from 'react';
import axios from 'axios'
import navs from '../../utils/nav'

const { Header, Content, Sider } = Layout;
let items = [
  { label: '首页', icon: <AppstoreFilled />, key: 'index' },
  {
    label: '数据管理', icon: <FileOutlined />, key: 'item-2', children: [
      { label: '用户列表', key: 'userlist' },
      { label: '商家列表', key: 'shoplist' }
    ]
  },
  // {
  //   label: '添加数据', key: 'item-3', children: [
  //     { label: '添加商铺' },
  //     { label: '添加商品' }
  //   ]
  // },
  {
    label: '图表', key: 'item-5', children: [
      { label: '用户分布' ,key:'visitor'}
    ]
  },
]

const App = () => {
  let Navigate = useNavigate()
  let location = useLocation()

  const [newuser, setnewuser] = useState(0);
  const [pathist, setpathist] = useState([]);

  function changeTab(val) {
    Navigate('/' + val.key)
  }

  useEffect(() => {
    navs.forEach(i=>{
      if(i.pathname == location.pathname){
        setpathist(i.title)
      }
    })

  })

  return (
    <Layout>
      <Sider width={220} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{
            height: '100%',
            borderRight: 0,
            // backgroundColor: '#324157',
            // backgroundColor:'#fff',
            // color: ' #bfcbd9'
          }}
          items={items}
          onClick={changeTab}
        />
      </Sider>
      <Layout
        style={{
          padding: '0 24px 24px',
        }}
      >
        <Breadcrumb
          style={{
            margin: '16px 0',
          }}
        >
          {pathist.map((i,index)=>{
            return <Breadcrumb.Item key={index}>{i}</Breadcrumb.Item>
          })}
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
            backgroundColor: '#fff'
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  )
};
export default App;